import React , { Component } from 'react';
import {connect} from 'react-redux';
import {actions} from './_index.js';
import ReactPullLoad, { STATS } from "react-pullload";

class View extends Component {
    constructor(props){
        super(props);

        this.state = {
            hasMore: true,
            data: [],
            action: STATS.init,
            index: 5,
            page:1,
        }

    }
    handleAction = action => {
        // console.info(action, this.state.action, action === this.state.action);
        //new action must do not equel to old action
        if (action === this.state.action) {
            return false;
        }
        if (action === STATS.refreshing) {
            //刷新
            this.handRefreshing();
        } else if (action === STATS.loading) {
            //加载更多
            this.handLoadMore();
        } else {
            //DO NOT modify below code
            this.setState({
                action: action
            });
        }
    };
    //刷新
    handRefreshing = () => {
        if (STATS.refreshing === this.state.action) {
            return false;
        }

        setTimeout(() => {
            //refreshing complete
            this.setState({
                data: [],
                hasMore: true,
                action: STATS.refreshed,
                index: 5
            });
            this.init();
            /***刷新
            方法被初始化相当于页面第一次被加载的时候
            都会有哪些内容
            可能会有一些事件方法
            也可能会有好多个ajax请求
            数据被初始化
            data:[]
            **/
        }, 3000);

        this.setState({
            action: STATS.refreshing
        });
    };
    _ajaxFn(number,prevData){
        const {onAjaxFn} = this.props;
        const ajaxCfg = {
            url:'/home/mediareports',
            cfg:{
                page_number:number,
                page_size:'10'
            },
            headers:{}
        }
        // this.state.timer = setTimeout(function(){
        //     onAjaxFn('发送数据',ajaxCfg)
        // },3000)
        onAjaxFn('发送数据',ajaxCfg,prevData);
    }
    componentDidMount(){
        this._ajaxFn(1,[]);
    }
    init(){
        this.listLoading(1,'刷新');
        this._ajaxFn(1,[]);
        // this.ladingImg();
        // this.ladingImg();
    }
    // 列表
    listLoading(_index,text){
        // console.log(_index,text);
    }
    //加载更多
    handLoadMore = () => {
        const {ulList} = this.props;

        // console.log(ulList.data)
        //
        // []  {}
        //
        // []
        if (STATS.loading === this.state.action) {
            return false;
        }
        //无更多内容则不执行后面逻辑
        if (!this.state.hasMore) {
            return;
        }

        setTimeout(() => {
            if (this.state.index === 0) {
                this.setState({
                    action: STATS.reset,
                    hasMore: false
                });
            } else {
                this.setState({
                    data: [],
                    action: STATS.reset,
                    index: this.state.index - 1
                });
                this.setState((state,props)=>{
                    page:state.page++
                })
                this.listLoading(this.state.page,'加载');
                this._ajaxFn(this.state.page,ulList);
            }
        }, 3000);

        this.setState({
            action: STATS.loading
        });
    }
    list(){
        const {ulList} = this.props;
        const list = ulList.map((val,key)=>{
            return(
                <li key={key}>{key}{val.main_title}</li>
            )
        })
        return list;
    }
    render(){
        const { data, hasMore } = this.state;
        const {ulList} = this.props;
        return (
            <React.Fragment>
                <ReactPullLoad
                  downEnough={150}
                  action={this.state.action}
                  handleAction={this.handleAction}
                  hasMore={hasMore}
                  style={{ paddingTop: 50 }}
                  distanceBottom={1000}
                >
                    <div className="h12">Pullload</div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <div className="h12"></div>
                    <ul>{ulList.length!==0 ? this.list() : []}</ul>
                </ReactPullLoad>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state) =>{
    console.log(state)
    return {
        ulList:state.pullloadData
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
	return {
		onAjaxFn: (text,ajaxCfg,prevData) => dispatch(actions.getApi(text,ajaxCfg,dispatch,prevData))
	}
};

export default connect(mapStateToProps,mapDispatchToProps)(View);
